import React,{ Component } from 'react';
import { connect } from 'react-redux';

import { Steps, Button, Modal, Form, Input, Badge } from 'antd';
import {messages} from "share/common";
import CMBCImg from 'images/cmbc-img.png'
import 'styles/supplier-management/overview/enable-service.scss'

import enableServer from 'containers/supplier-management/overview/enable-service/enable-service.service';
import menuRoute from "routes/menuRoute";
import {message} from "antd/lib/index";

const Step = Steps.Step;
const FormItem = Form.Item;

class OpenHeliosHotel extends Component{

  constructor(props){
    super(props);
    this.state = {
      showModal: false,
      supplierDetail: menuRoute.getRouteItem('supplier-detail','key'),
    }
  }

  openHeliosHotel = () => {
    this.setState({showModal:true});
  }

  cancelHeliosHotel = () => {
    this.setState({showModal:false});
  }

  toEnableHeliosHotel = () => {
    this.props.form.validateFieldsAndScroll((err,values) => {
      if(!err){
        const param = {
          ...values,
          companyOID: this.props.company.companyOID,
          companyName: this.props.company.name,
        }
        enableServer.enableHeliosHotel(param).then( res => {
          this.cancelHeliosHotel();
          message.success(messages('supplier.key15'/*开通成功*/));
          this.context.router.push(this.state.supplierDetail.url.replace(':supplierName','heliosHotel'));
        }).catch(err => {
          console.log(err);
          message.error(err.response.data.message);
        })
      }
    })
  }

  createStepDescription = (stepNum) => {
    let stepDes = [];
    switch (stepNum){
      case 1:
        stepDes = [{id:'step1-1',name:messages('supplier.key183')/*弹出在线开通甄选服务*/}];
        break;
      case 2:
        stepDes = [
          {id:'step2-1',name:messages('supplier.key184')/*输入相关开票信息*/},
          {id:'step2-2',name:messages('supplier.key185')/*支付方式为个人支付*/},
          {id:'step2-3',name:messages('supplier.key186')/*如需公司支付,请致电汇联易*/},
          ];
        break;
      case 3:
        stepDes = [{id:'step3-1',name:messages('supplier.key187')/*开通成功后，自动返回至供应商管理主页，甄选酒店启用成功*/}];
        break;
    }

    return(
      <div className='helios-box'>
        <div className='helios-triangle'/>
        <div style={{whiteSpace: 'normal'}}>
          {stepDes.map(item => {
            return (<Badge key={item.id} status='default' text={item.name}/>)
          })}
        </div>
      </div>
    )
  }

  render(){
    const { showModal } = this.state;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 10, offset: 1}
    };
    return(
      <div>
        <h3>{messages('supplier.key188')/*启用甄选酒店服务*/}</h3>
        <div className="bg-img" style={{textAlign: 'center'}}>
          <img src={CMBCImg} alt=""/>
        </div>
        <div className="black-tips">{messages('supplier.key189')/*开通过后，即可在汇联易中使用甄选酒店*/}</div>
        <div className="open-button">
          <Button type="primary" onClick={this.openHeliosHotel}>
            {messages('supplier.key35'/*立即开通*/)}
          </Button>
        </div>
        <Steps current={2}>
          <Step title={messages('supplier.key26')/*点击【立即开通】按钮*/} description={this.createStepDescription(1)} />
          <Step title={messages('supplier.key190')/*填写信息*/} description={this.createStepDescription(2)} />
          <Step title={messages('supplier.key15'/*开通成功*/)} description={this.createStepDescription(3)} />
        </Steps>
        <br/><br/>
        <br/><br/>
        <Modal onOk={this.toEnableHeliosHotel} onCancel={this.cancelHeliosHotel} visible={showModal} title={messages('supplier.key191')/*在线开通甄选服务*/}>
          <Form>
              <FormItem {...formItemLayout} label={messages('components.key383'/*支付方式*/)}>
                {
                  getFieldDecorator('payType',{
                    initialValue:messages('supplier.key192')/*个人支付(支付宝/微信)*/
                  })(
                    <Input disabled/>
                  )
                }
              </FormItem>
            <FormItem {...formItemLayout} label={messages('supplier.key79'/*发票抬头*/)}>
              {
                getFieldDecorator('invoiceTitle',{
                  rules:[{
                    required:true,
                    message:messages('common.please.enter')/*请输入*/
                  }]
                })(
                  <Input />
                )
              }
            </FormItem>
            <FormItem {...formItemLayout} label={messages('supplier.key80'/*收件人*/)}>
              {
                getFieldDecorator('contactName',{
                  rules:[{
                    required:true,
                    message:messages('common.please.enter')/*请输入*/
                  }]
                })(
                  <Input />
                )
              }
            </FormItem>
            <FormItem {...formItemLayout} label={messages('enterprise-manage.key134'/*电话*/)}>
              {
                getFieldDecorator('contactPhone',{
                  rules:[{
                    required:true,
                    message:messages('common.please.enter')/*请输入*/
                  }]
                })(
                  <Input />
                )
              }
            </FormItem>
            <FormItem {...formItemLayout} label={messages('supplier.key193')/*收件地址*/}>
              {
                getFieldDecorator('contactAddress',{
                  rules:[{
                    required:true,
                    message:messages('common.please.enter')/*请输入*/
                  }]
                })(
                  <Input />
                )
              }
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
}

OpenHeliosHotel.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    company: state.login.company
  }
}

const wrapperOpenHeliosHotel = Form.create()(OpenHeliosHotel);

export default connect(mapStateToProps)(wrapperOpenHeliosHotel);
